<!-- 发起合同续签意向表 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="'发起合同续签意向'" showBack />
    </template>
    <div class="template-steps">
      <a-steps :current="currentStep" style="width: 600px">
        <a-step>基础信息</a-step>
        <!-- <a-step>表单设计</a-step> -->
        <a-step>预览表单</a-step>
      </a-steps>
    </div>
    <div class="step" v-show="currentStep === 1">
      <a-form :model="formData" style="width: 500px" auto-label-width>
        <a-form-item label="意向表名称" required>
          <a-input v-model="formData.name"></a-input>
        </a-form-item>
        <a-form-item label="被沟通人" required>
          <HumanMultipleModal
            ref="refHumanMultipleModal"
            v-model:values="formData.userIds"
          />
        </a-form-item>
        <a-form-item label="续签意向表模板：" required>
          <a-select v-model="formData.templateId" @change="changeTemplate">
            <a-option
              v-for="item in templateList"
              :key="item.name"
              :value="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="formData.remark" allow-clear />
        </a-form-item>
      </a-form>
    </div>
    <!-- <div v-show="currentStep === 2" class="step">
      表单编辑我搞不定交给有缘人，感谢有缘人
      <newSetUpForm
        ref="refSetUpForm"
        v-model:layout="rest"
        :businessType="[
          'SER_FUNC218F8148FCD249D2A3791D31B02669C0',
          'baseComponent'
        ]"
        @changeSeconds="(e:any) => controlData.collectionModel = clonedeep(e)"
        v-model:setUpList="controlData.collectionModel"
      />
    </div> -->
    <div v-if="currentStep === 2" class="step">
      <div class="previewCenter">
        <div class="text">{{ formData.name }}</div>
        <PreviewCenter
          :setUpList="controlData.collectionModel[0].controlModel"
        />
        <div class="mask"></div>
      </div>
    </div>
    <footer>
      <a-space>
        <a-button class="btn" type="secondary" @click="router.back()">
          取消
        </a-button>
        <a-button
          type="secondary"
          v-show="currentStep != 1"
          @click="currentStep--"
        >
          <IconLeft />
          上一步
        </a-button>
        <a-button type="primary" @click="next" v-show="currentStep != 2">
          下一步
          <IconRight />
        </a-button>
        <a-button type="primary" v-show="currentStep === 2" @click="save">
          确认发起
        </a-button>
      </a-space>
    </footer>
  </ContentCard>
</template>

<script setup lang="ts">
import PreviewForm from '@/components/DynamicFormsNew/SetUpForm/PreviewForm.vue';
import {
  GetContractRenewalTemplateList,
  AddUserRenewCommunicate,
  GetContractRenewalTemplateDetail
} from '@/apis/management/contract/baseSetting';
import PreviewCenter from '@/components/DynamicFormsNew/SetUpForm/components/CenterConfig/previewCenter.vue';
import { Message } from '@arco-design/web-vue';

const route = useRoute();
const router = useRouter();
let formData = reactive<any>({});

const currentStep = ref(1);
let next = async () => {
  if (currentStep.value === 1) {
    if (!formData.name) {
      return Message.error('请填写名称');
    } else if (!formData.userIds || !formData.userIds.length) {
      return Message.error('请选择人员');
    } else if (!formData.templateId) {
      return Message.error('请选择人员');
    }
    // currentStep.value++;
  }
  currentStep.value++;
};

//选择模板
let controlData = reactive<any>({});
let changeTemplate = async (id: any) => {
  let res = filterId(await GetContractRenewalTemplateDetail({ id }));
  if (!res?.collectionModel || res.collectionModel.length === 0) {
    delete formData.templateId;
    return Message.error('该模板没有配置数据，请重新选择');
  }
  Object.assign(controlData, res);
};

// 确认并保存
const save = async () => {
  try {
    //
    await AddUserRenewCommunicate({
      contracts: formData.userIds.map((userId: number) => {
        return {
          name: formData.name,
          userId,
          renewal: 3,
          remark: formData.remark,
          templateId: formData.templateId,
          control: {
            ...controlData,
            collectionModel: controlData.collectionModel.map((item: any) => {
              return {
                ...item,
                controlModel: item.controlModel.map((item: any) => {
                  return {
                    ...item,
                    ctlValue: { ctlValue: ' ', ctlCode: ' ' }
                  };
                })
              };
            })
          }
        };
      })
    });
    Message.success('提交成功');
    router.back();
  } catch (error: unknown) {
    console.log(error);
  }
};

let templateList = ref<any[]>([]);
//初始化数据
let initializationData = async () => {
  try {
    let data = JSON.parse(route.query.jsonStr + '');
    formData.userIds = data.userIds;
  } catch (err) {
    //
  }
  let { content } = await GetContractRenewalTemplateList({
    pageNumber: 0,
    pageSize: -1,
    ownerType: 1
  });
  templateList.value = content || [];
};
initializationData();

//过滤id 把传入的数据每一层id都删除
let filterId = (data: any) => {
  if (typeof data != 'object' || data == null) return data;
  let runData: any = Array.isArray(data) ? [] : {};
  for (const key in data) {
    if (key !== 'id') runData[key] = filterId(data[key]);
  }
  return runData;
};
const rest = ref('horizontal');
</script>

<style lang="less" scoped>
.template-steps {
  padding: 0 160px;
  margin-bottom: 60px;
}
.previewCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 1400px;
  position: relative;
  padding: 20px;
  .text {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: not-allowed;
  }
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
    margin-left: 10px;
  }
}
.step {
  display: flex;
  justify-content: center;
  height: 100%;
}
:deep(.arco-steps) {
  width: 300px;
  margin: 0 auto;
}
</style>
